<template>
	<van-tabbar route v-model="active"
		@change="onChange"
		active-color="#ee0a24"
		inactive-color="#000">
		<van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
		<van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
		<van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	import { ref, getCurrentInstance } from 'vue'
	import router from '../../route/index'

	export default {
		name: 'BottomBar',
		setup(props, ctx) {
			const {proxy} = getCurrentInstance()
			const active = ref(0)
			const onChange = (index) => {
				if (index === 1) {
					active.value = 1
					if (localStorage.getItem('isLogin')) {
						router.push('/cart')
					} else {
						setTimeout(() => {
							router.push('/login')
						}, 500)
					}
				}
				if (index === 2) {
					active.value = 2
					if (localStorage.getItem('isLogin')) {
						router.push('/my')
					} else {
						showToast('请先登录')
						setTimeout(() => {
							router.push('/login')
						}, 500)
					}
				}
			};
			return {
				active,
				onChange,
			};
		},
	}
</script>